<template>
	<!-- 课程详情页 -->
	<view>
		<!-- 主图和基本信息 -->
		<course-header :course="course"></course-header>

		<!-- //详情  章节   评论   套餐  的组件 -->
		<!-- 动态获取高度 -->
		<view class="course-details" :style="'height:' + pageHeight + 'px'">
			<tab-bar :tabs="tabs" v-model="tabIndex"></tab-bar>
			<swiper class="swiper-box" :duration="300" :current="tabIndex" circular @change="changeTab">
				<swiper-item v-for="(item, index) in tabs" :key="index">
					<scroll-view class="scroll-box" :scroll-y="enableScroll" @scrolltoupper="scrolltoupper"
						:upper-threshold="0">
						<view class="details-info">
							<course-info v-if="index=== 0" :detailUrls="course.detailUrls"></course-info>
							<course-dir v-if="index=== 1" :chapterList="chapterList" :isBuy="isBuy"
								@playVideo="playVideo" :activeObj="activeObj"></course-dir>
							<course-comment v-if="index=== 2" :commentList="commentList"></course-comment>
							<course-group v-if="index=== 3" :groupList="groupList"></course-group>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>

		<!--  底部按钮 立即购买按钮组件 -->
		<!-- 逻辑 isBuy 是购买还是未购买   isFree 是收费还是免费 -->
		<bottom-btn :btnText="isBuy || course.isFree ?  '立即观看' : '立即购买' " @clickBottom="clickBottom"></bottom-btn>

		<!-- #ifdef APP-PLUS -->
		<!-- 分享组件   同名组件 不用注册 直接引用  -->
		<mxg-share ref="share" :shareData="course"></mxg-share>
		<!-- #endif -->

		<!-- 试看窗口组件  @touchmove.stop.prevent="()=>{}"  阻止冒泡滑动  -->
		<view v-if="videoUrl" class="video-box mask" @click="closePlay" @touchmove.stop.prevent="()=>{}">
			<view class="name">
				<text>免费试看</text>
				<text class="iconfont icon-close"></text>
			</view>
			<!-- H5端播放是有问题 -->
			<video id="playVideo" class="video" :src="videoUrl"></video>
		</view>

	</view>
</template>

<script>
	// bottom   按钮组件
	import bottomBtn from './components/bottom-btn.vue'
	// 详情页  头部组件
	import courseHeader from '@/pages/course/components/course-header.vue'
	//详情  章节   评论   套餐  的组件 
	import tabBar from '@/components/common/tab-bar.vue'
	//标签数组  config 数据
	import tabs from '@/config/course-detai-tabs'

	// 详情
	import courseInfo from './components/course-info.vue'

	//章节
	import courseDir from './components/course-dir.vue'
	//评论
	import courseComment from './components/course-comment.vue'
	//套餐
	import courseGroup from './components/course-group.vue'

	//API
	import api from '@/api/course.js'

	export default {
		components: {
			courseHeader,
			tabBar,
			courseInfo,
			courseDir,
			courseComment,
			courseGroup,
			bottomBtn
		},
		data() {
			return {
				tabs, //标签选项卡数据
				tabIndex: 0, //当前选项下标
				pageHeight: 3000, //手机的视口高度  动态高度
				statusNavHeight: 0, //状态栏  +  导航栏高度 
				enableScroll: false, //详情区域是否滚动  false 就是不能 
				detailTop: 0, //详情区域距离顶部距离

				id: null, //	课程ID
				course: {}, //课程基本信息
				chapterList: [], //章节信息
				commentList: [], //评论信息
				groupList: [], //套餐信息
				isBuy:  true, //是否购买，默认 未购买 false

				videoUrl: null, //播放视频地址
				videoContext: null, //video 播放器实例
				activeObj: {
					chapterIndex: -1, //章的下标
					sectionIndex: -1 //节的下标
				}, //当前点击的第几节的下标   小程序
			}
		},
		//监听App端 右上角分享按钮   生命钩子  
		//针对App端
		// #ifdef APP-PLUS
		onNavigationBarButtonTap(e) {
			console.log('eeeee', JSON.stringify(e))

			// 自定义分享组件
			if (e.type === 'share') {
				this.$refs.share.showHandler()
			}
			//下面使用的系统自带分享组件  (分享组件格式不支持android)
			//  if(e.type =  'share'){  //判断是否是分享按钮
			// // uni.downloadFile  上传下载  搜uniapp 官网文档
			// 	uni.downloadFile({
			// 		url:this.course.mainImage,
			// 		success:(res)=> {
			// 			// console.log('下载完成tempFilePath临时文件',res.tempFilePath)
			// 			//注意 ： android手机分享只能发送图片  
			// 			//app 端分享  shareWithSystem  | uniapp文档
			// 			uni.shareWithSystem({
			// 			  summary: '学习伴你梦想学习伴你梦想学习伴你梦想',
			// 			  href: 'https://www.mengxuegu.com',
			// 			  type:'image',
			// 			  imageUrl:res.tempFilePath ,
			// 			  success(){
			// 			    // 分享完成，请注意此时不一定是成功分享
			// 				uni.showToast({
			// 					title:'分享成功'
			// 				})
			// 			  },1
			// 			  fail(){
			// 			    // 分享失败
			// 			  }
			// 			})
			// 		}
			// 	})	
			// }
		},
		// #endif

		//针对小程序分享  
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: this.course.title,
				path: this.$util.routePath()
			}
		},




		onLoad(option) { //course-item 组件接收id 
			console.log(option.id)
			this.getPageHeight()

			//禁止 点击状态栏回到顶部  
			// android 是没有效果  只有ios 禁用双击导航栏 回到顶部
			// // #ifdef APP-PLUS
			// this.noStatusScrollTop()
			// // #endif

			//获取课程ID   查询课程数据  
			this.id = option.id
			this.loadData()
		},

		// 页面监听滚动到底部  
		// pages.json 配置
		onReachBottom() {
			// console.log('监听页面滚动到底部')
			//页面到达底部  开启详情区域滚动
			this.enableScroll = true
		},

		//生命钩子  监听页面滚动   参数为object  
		onPageScroll(e) {
			// console.log('监听页面滚动',e,this.detailTop)
			// let  i = this.detailTop - this.statusNavHeight
			// console.log('减去后的结果',  i )
			// 逻辑就是 
			// detailTop 详情区域的高度 - 导航栏和状态栏的高度 = 实时监听的高度
			if (this.detailTop - this.statusNavHeight <= e.scrollTop) {
				//页面到达底部则将详情区域滚动条开启
				this.enableScroll = true
				//直接停止 不让它继续往下面走 如果没有return  它还是会往下面走
				return
			}


			// console.log('this.detailTop',this.detailTop)

			//这个 e.scrollTop  监听到 course-header 组件有多高的top 
			//当前滚动条距离顶部高度小于  详情标签到顶部高度
			if (this.enableScroll && e.scrollTop < this.detailTop) {
				//禁止详情滚动
				this.enableScroll = false

			}


		},

		//生命钩子 第一次进入页面渲染完后触发  
		onReady() {
			// 官方查找 createSelectorQuery  
			let view = uni.createSelectorQuery().in(this).select(".course-details");

			view.fields({
				// size: true,  //宽高  width height 
				rect: true //上下左右 
			}, data => {
				// console.log("得到节点信息" + JSON.stringify(data.top));
				this.detailTop = data.top
				// console.log("节点的宽为" + data.width);
			}).exec();


			//获取当前播放实例
			this.videoContext = uni.createVideoContext('playVideo', this)


		},
		methods: {
			//初始化课程数据
			loadData() {
				//0、判断是否已购买
				this.getCourseIsBuy()
				//1、查询课程基本信息
				this.getCourseById()
				//2、查询章节列表
				this.getChapterSectionList()
				//3、查询评论列表
				this.getCourseCommentList()
				//4、查询组合套餐列表
				this.getCourseGroupList()
			},

			//0、判断是否已购买
			async getCourseIsBuy() {
				//如果已登录  则判断是否已购买
				const isLogin = this.$util.isLogin({
					nav: false
				}) //未登录吧不用跳转登录页
				if (isLogin) { // 如果已登录 则判断是否已购买
					const {
						data
					} = await api.getCourseIsBuy(this.id)
					this.isBuy = data.isBuy
				}
			},



			//1、查询课程基本信息
			async getCourseById() {
				const {
					data
				} = await api.getCourseById(this.id)
				this.course = data

				//将当前的标题title传递给导航栏
				uni.setNavigationBarTitle({
					title: data.title
				});
			},

			//2、查询章节列表
			async getChapterSectionList() {
				const {
					data
				} = await api.getChapterSectionList(this.id)
				this.chapterList = data
			},
			//3、查询评论列表
			async getCourseCommentList() {
				const {
					data
				} = await api.getCourseCommentList(this.id)
				this.commentList = data
			},
			//4、查询组合套餐列表
			async getCourseGroupList() {
				const {
					data
				} = await api.getCourseGroupList(this.id)
				this.groupList = data
			},

			// 左右切换
			changeTab(e) {
				//这个e 是uniapp 中自带属性
				// current 改变是回除非change事件.
				// event.detal = {current.current ,source:source}
				//下标改变的时候  切换的页面也跟他赋值
				this.tabIndex = e.detail.current
				// console.log('？？？？', e.detail.current)
				// 页面回到底部
				uni.pageScrollTo({
					scrollTop: this.detailTop,
					duration: 300
				})
			},

			// 获取当前页面视口高度
			getPageHeight() {
				// 获取系统信息同步接口  以下得属性可在uniapp官网文档
				const res = uni.getSystemInfoSync()
				// 获取平台你     platform 机型类型得属性 可在uniapp 查阅
				const system = res.platform
				// 状态栏高度  statusBarHeight	状态栏的高度   字节跳动小程序不支持
				const statusBarHeight = res.statusBarHeight
				if (system === 'android') { //android 高度是  48   
					// 状态导航高度
					this.statusNavHeight = statusBarHeight + 48
				} else if (system === 'ios') { //ios 高度是 44
					this.statusNavHeight = statusBarHeight + 44
				}
				// screenHeight	屏幕高度   
				this.pageHeight = res.screenHeight - this.statusNavHeight
			},


			//禁用点击 状态栏回到顶部  ios 机型才有效
			noStatusScrollTop() {
				// 获取当前页面实例
				const Webview = this.$scope.$getAppWebview();
				WebView.setStyle({
					'scrollsToTop': false
				})
			},


			//详情区域到达顶部的时候 会自动回到全页面的效果
			// scrolltoupper组件滚动到顶部  
			scrolltoupper() {
				//官方搜索api 搜索 uni pageScrollTo
				//1、让页面滚动条回到顶部
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 150
				});
				//2、禁用详情scrollView滚动
				this.enableScroll = false
			},

			// 点击底部 是否购买或者观看
			clickBottom() {
				if (this.isBuy || this.course.isFree) {
					//已购买过或免费  跳转视频播放页面
					this.navTo(`/pages/course/course-play?id=${this.id}`,{login:true})
				} else {
					//未购买 跳转确认购买页
					// encodeURIComponent  url 字符串会有限制 所以用到、encodeURIComponent  
					this.navTo(`/pages/order/confirm-buy?course=`+encodeURIComponent(JSON.stringify(this.course)))

				}
			},
			//关闭播放窗口
			closePlay() {
				this.videoContext.stop()//视频停止播放pause() 
				this.videoUrl = null
			},

			// 试看视频
			playVideo(obj) {
				console.log('obj', JSON.stringify(obj))
				if (this.isBuy) {
					//已经购买 则直接跳转到视频播放列表页面
					this.navTo(`/pages/course/course-play?id=${this.id}`,{login:true})
					return
				}
				//解决小程序高亮显示问题
				// #ifdef MP
				this.activeObj = obj.activeObj
				// #endif
				
				//弹出播放窗口
				this.videoUrl = obj.section.videoUrl
				//让他页面渲染完成后在进行播放
				// play 会自动播放
				this.$nextTick(() => {
					//打开自动播放
					this.videoContext.play()
				})
			}

		}

	}
</script>

<style lang="scss">
	.course-details {
		overflow: hidden;
		.swiper-box,
		.scroll-box {
			height: 100%;
		}

		.details-info {
			// 被隐藏的80rpx（标签选项卡高度）
			padding-bottom: 180rpx;
		}
	}

	.video-box {
		//video  视频的
		z-index: 100;
		text-align: center;

		.name {
			color: #FFFFFF;
			position: relative;
			top: 380rpx;
			font-size: 38rpx;
			font-weight: bold;
			/* #ifdef MP*/
			top: 300rpx;
			/*#endif*/
		}

		.video {
			width: 750rpx;
			height: 420rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%); //固定定位的居中
		}

		.icon-close {
			margin-left: 20rpx;
		}
	}
</style>
